<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色搭配工具</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-palette"></i> 颜色搭配工具</h1>
            <p>选择一个主颜色，添加配色，生成和谐的颜色方案</p>
        </header>

        <main>
            <section class="color-input">
                <div class="main-color-section">
                    <h2>主颜色</h2>
                    <div class="color-picker-container">
                        <input type="color" id="mainColor" value="#4e54c8">
                        <input type="text" id="mainColorHex" value="#4e54c8">
                    </div>
                    <div class="color-preview" id="mainColorPreview" style="background-color: #4e54c8;"></div>
                </div>

                <div class="palette-section">
                    <h2>配色方案</h2>
                    <div class="scheme-options">
                        <button class="scheme-btn active" data-scheme="complementary">互补色</button>
                        <button class="scheme-btn" data-scheme="analogous">类似色</button>
                        <button class="scheme-btn" data-scheme="triadic">三角色</button>
                        <button class="scheme-btn" data-scheme="split-complementary">分裂互补色</button>
                        <button class="scheme-btn" data-scheme="tetradic">四角色</button>
                        <button class="scheme-btn" data-scheme="monochromatic">单色调</button>
                    </div>
                </div>

                <div class="custom-colors-section">
                    <h2>自定义配色 <button id="addCustomColor" class="add-btn"><i class="fas fa-plus"></i></button></h2>
                    <div id="customColorsContainer">
                        <div class="custom-color-item">
                            <div class="color-picker-container">
                                <input type="color" class="customColor" value="#8f94fb">
                                <input type="text" class="customColorHex" value="#8f94fb">
                            </div>
                            <div class="color-preview custom-preview" style="background-color: #8f94fb;"></div>
                            <button class="remove-btn"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                </div>

                <button id="generateBtn" class="generate-btn">生成配色方案</button>
            </section>

            <section class="results-section" id="resultsSection">
                <h2>生成的配色方案</h2>
                <div class="palette-container" id="generatedPalette">
                    <!-- 生成的配色将在这里显示 -->
                </div>
                <div class="palette-info">
                    <div class="harmony-score">
                        <h3>和谐度评分</h3>
                        <div class="score-container">
                            <div class="score-value" id="harmonyScore">0</div>
                            <div class="score-bar-container">
                                <div class="score-bar" id="harmonyScoreBar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="palette-details">
                        <h3>配色详情</h3>
                        <div id="paletteDetails">
                            <!-- 配色详情将在这里显示 -->
                        </div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button id="saveBtn" class="action-btn"><i class="fas fa-save"></i> 保存配色</button>
                    <button id="copyBtn" class="action-btn"><i class="fas fa-copy"></i> 复制代码</button>
                </div>
            </section>
        </main>

        <section class="saved-palettes" id="savedPalettes">
            <h2>已保存的配色</h2>
            <div class="saved-palettes-container" id="savedPalettesContainer">
                <!-- 保存的配色将在这里显示 -->
            </div>
        </section>

        <footer>
            <p>© 2023 颜色搭配工具 | 设计与开发</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>